﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-1.8.2.js"></script>
    <script src="../Scripts/basejs.js"></script>
    <script src="../Scripts/Treejs.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="../css/tree.css" rel="stylesheet" />

</head>
<body >
    <span class="button switch roots_close"></span>
    <div id="div_tree_box">
       
    </div>

    <div id="div_show" >

    </div>
    
    <input type="button" id="btnreload"  value="reload"/>

    <input type="button" id="btnrefresh" value="refresh" />

    <input type="button" id="btngetSelected" value="getSelected" />
    <script>
        
        $(document).ready(function () {
            //在treeModel==default模式下，默认值只能设置在叶子节点上，
            //在checkbox模式下 默认值如果设置在父节点上则子节点所有项将被设为默认选中
            var data = [{ Id: 1, Icon: "/static/css/img/1_open.png", Name: "张三", Child: null }, { Id: 2, Name: "李思", Selected: true, Child: [{ Id: 21, Name: "张三", Child: null }, { Id: 22, Name: "李思", Selected: true, Child: [{ Id: 221, Name: "王五", Child: null }] }, { Id: 2200, Name: "李思", Selected: false, Child: [{ Id: 22100, Name: "王五", Child: null, Selected: true }] }, { Id: 3, Name: "王五", Child: null }] }, { Id: 31, Name: "王五", Child: [{ Id: 311, Name: "张三", Child: null }, { Id: 312, Name: "李思", Child: null }, { Id: 313, Name: "王五", Selected: false, Icon: "/static/css/img/5.png", Child: [{ Id: 3131, Selected: false, Name: "王五", Child: null }, { Id: 3131, Selected: true, Name: "王五1", Child: null }] }] }];
            var app=$("#div_tree_box").Tree({
                data: data,
                //expand: true,
                //url: "/group",
                multiple: true,
                treeModel: "checkbox",
                key: "Id",
                text: "Name",
                //child: "Cgroup",//Data: [{Id:53bcf6686609410a08000002, Name:默认, ONum:0, CNum:0, Cgroup:[], Icon:},…]
                source: "Data",//深层数据{Data:{Title:"标题"},Success:true}如果数据为：{Os:{Data:{Title:"标题"},Success:true}} 则：Os.Data; 默认为空
                selected: function (data) {
                    $("#div_show").html("id:" + data.key + " 父节点id:" + data.pid);
                }//选中节点事件
            });
            $("#btngetSelected").click(function () {
                var data = app.getSelected();
                $.each(data, function (i, n) {
                    alert("id:" + n.key + " 父节点id:" + n.pid);
                });
            });

        });

        

        

        function converage(obj) {
            return obj + "岁";
        }

        function convertime(obj) {
            return obj.substring(0,10);
        }

        function converstr(obj){
            return obj.substring(0,30);
        }
    </script>
</body>

</html>
